<template>
  <!-- App Header -->
  <div class="appHeader">
      <div class="pageTitle">
          我的
      </div>
  </div>
  <!-- * App Header -->

  <!-- App Capsule -->
  <div id="appCapsule">
      <div class="section mt-3 text-center">
          <div class="avatar-section">
              <div>
                  <img :src="avatar" alt="avatar" class="imaged w100 rounded">
                  <span class="button">
                      <i class="ion ion-md-camera"></i>
                  </span>
              </div>
          </div>
          <div class="username-section">{{ nickName }}</div>
      </div>

      <div class="listview-title mt-1">学习</div>
      <ul class="listview image-listview text inset no-line">
          <li>
              <div class="item">
                  <div class="in">
                      <div>
                          暗夜模式
                      </div>
                      <div class="form-check form-switch ms-2">
                          <input class="form-check-input dark-mode-switch" type="checkbox" id="darkmodeSwitch">
                          <label class="form-check-label" for="darkmodeSwitch"></label>
                      </div>
                  </div>
              </div>
          </li>
          <li>
              <div class="item">
                  <div class="in">
                      <div>
                          学习计划
                      </div>
                      <div class="input-wrapper">
                          <select class="form-control custom-select" v-model="schedule">
                              <option v-for="option in scheduleOptions" :value="option.value">{{option.text}}</option>
                          </select>
                      </div>
                  </div>
              </div>
          </li>
      </ul>

      <div class="listview-title mt-1">关于</div>
      <ul class="listview image-listview text inset">
          <li>
              <div class="item" data-bs-target="#aboutUs" data-bs-toggle="modal">
                  <div class="in">
                      <div>关于我们</div>
                  </div>
              </div>
          </li>
          <li>
              <div class="item" data-bs-target="#privicy" data-bs-toggle="modal">
                  <div class="in">
                      <div>隐私政策</div>
                  </div>
              </div>
          </li>
      </ul>

      <div class="listview-title mt-1">安全</div>
      <ul class="listview image-listview text mb-2 inset">
          <li>
              <div class="item">
                  <div class="in">
                      <div style="color: red" @click="logout">注销登录</div>
                  </div>
              </div>
          </li>
      </ul>


  </div>
  <!-- * App Capsule -->
  <Footermenu></Footermenu>

  <!--  关于我们的Modal-->
  <div class="modal fade action-sheet" id="aboutUs" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">关于我们</h5>
              </div>
              <div class="modal-body">
                  <div class="action-sheet-content">
                    <p>欢迎来到知马开门App，我们的使命是通过创新和科技，提供最佳的马来语学习体验。</p>
                    <p>我们的团队由热情的语言学者、经验丰富的教育专家和技术天才组成，共同致力于让学习马来语成为一种轻松愉快的旅程。无论你是初学者还是想要提高水平的学习者，我们的App都能满足你的需求。</p>
                  </div>
              </div>
          </div>
      </div>
  </div>

    <!--  隐私政策的Modal-->
  <div class="modal fade action-sheet" id="privicy" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">隐私政策</h5>
              </div>
              <div class="modal-body">
                  <div class="action-sheet-content">
                      <h3>1. 收集的信息</h3>
                      <p>我们收集信息以提供更好的服务给所有的用户。我们收集的信息类型主要有两类：</p>
                      <ul>
                          <li>您提供给我们的信息，例如：当您创建账户时，您提供的姓名、电子邮件地址、电话号码、支付信息等。</li>
                          <li>我们在您使用服务时获取的信息，包括设备信息、日志信息、位置信息、本地存储和Cookie等。</li>
                      </ul>

                      <h3>2. 信息的使用</h3>
                      <p>我们使用收集的信息来提供、维护、保护和改进我们的服务，同时也用这些信息来开发新的服务。我们还会使用这些信息来提供个性化的内容，例如给您更合适的课程推荐。</p>

                      <h3>3. 信息的共享</h3>
                      <p>我们不会与公司、组织和个人分享您的个人信息，除非符合以下情况：</p>
                      <ul>
                          <li>获得您的同意，我们会在共享信息之前获取您的明确同意。</li>
                          <li>出于法律原因，我们可能会因为法律程序、法律义务或政府要求而公开您的个人信息。</li>
                      </ul>

                      <h3>4. 信息安全</h3>
                      <p>我们努力保护我们的用户免受未经授权的访问、更改、披露或破坏信息的风险。我们采取了多种安全措施来提高安全性，包括通过SSL加密技术传输数据。</p>

                      <h3>5. 用户权利</h3>
                      <p>您可以随时查看、更改或删除您的个人信息。您也可以选择退出某些服务，或者直接与我们联系来限制我们对您信息的使用。</p>

                      <h3>6. 政策的更改</h3>
                      <p>我们的隐私政策可能会变更。我们不会削减您按照本隐私政策所享有的权利，除非我们得到您的明确同意。我们会在本页面发布任何隐私政策的变更，并且如果变更是重大的，我们会提供更为显著的通知。</p>

                      <h3>7. 联系方式</h3>
                      <p>如果您对我们的隐私政策有任何疑问，请通过以下邮箱与我们联系：mars.123@cuc.edu.cn</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>

import Footermenu from "../components/Footermenu.vue";
import {computed, defineComponent, onMounted, reactive, ref, watch} from "vue";
import {useStore} from "vuex";
import axios from '../utils/axios-plugin.js'
import {useRouter} from "vue-router";
export default defineComponent({
  name:'Home',
  components: {Footermenu},
  setup(){
    onMounted(() => {
        // Dark Mode
      const checkDarkModeStatus = localStorage.getItem("wordappDarkmode");
      const switchDarkMode = document.querySelectorAll(".dark-mode-switch");
      const pageBodyActive = pageBody.classList.contains("dark-mode");

    // Check if enable as default
      if (wordapp.Dark_Mode.default) {
          pageBody.classList.add("dark-mode");
      }

      // Local Dark Mode
      if (wordapp.Dark_Mode.local_mode.enable) {
        const nightStart = wordapp.Dark_Mode.local_mode.start_time;
        const nightEnd = wordapp.Dark_Mode.local_mode.end_time;
        const currentDate = new Date();
        const currentHour = currentDate.getHours();
        if (currentHour >= nightStart || currentHour < nightEnd) {
              // It is night time
              pageBody.classList.add("dark-mode");
          }
      }

      // Auto Detect Dark Mode
      if (wordapp.Dark_Mode.auto_detect.enable)
          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
              pageBody.classList.add("dark-mode");
          }

      function switchDarkModeCheck(value) {
          switchDarkMode.forEach(function (el) {
              el.checked = value
          })
      }
      // if dark mode on
      if (checkDarkModeStatus === "1" || pageBody.classList.contains('dark-mode')) {
          switchDarkModeCheck(true);
          if (pageBodyActive) {
              // dark mode already activated
          }
          else {
              pageBody.classList.add("dark-mode")
          }
      }
      else {
          switchDarkModeCheck(false);
      }
      switchDarkMode.forEach(function (el) {
          el.addEventListener("click", function () {
            const darkmodeCheck = localStorage.getItem("wordappDarkmode");
            const bodyCheck = pageBody.classList.contains('dark-mode');
            if (darkmodeCheck === "1" || bodyCheck) {
                  pageBody.classList.remove("dark-mode");
                  localStorage.setItem("wordappDarkmode", "0");
                  switchDarkModeCheck(false);
              }
              else {
                  pageBody.classList.add("dark-mode")
                  switchDarkModeCheck(true);
                  localStorage.setItem("wordappDarkmode", "1");
              }
          })
      })
    })
    const scheduleOptions = ref([
      { text: 20, value: 20 },
      { text: 15, value: 15 },
      { text: 10, value: 10 },
    ])
    const router = useRouter()
    const state = useStore()
    const nickName = computed(() => state.getters.getNickName)
    // 计算属性read only
    const avatar = computed(() => state.getters.getAvatar)
    const schedule = ref(state.getters.getSchedule)
    watch(schedule,(new_,old_)=>{
      axios.post('/user/schedule',{'schedule':new_})
          .then(()=>{
            state.commit('setSchedule',{ schedule: new_});
            sessionStorage.setItem('schedule',new_)
            alert('更改学习计划成功')
          })
    })

    function logout(){
      localStorage.clear()
      router.push('/login')
    }
    return {
      nickName,
      avatar,
      schedule,
      scheduleOptions,
      logout
    }
  }
})
</script>

<style scoped lang="scss">

</style>